<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字超出隐藏</title>
    <style>
        div {
            margin: auto;
            width: 150px;
            height: 50px;
            border: 1px solid #000;
            /*第一步，先文字不换行，white-space*/
            white-space: nowrap;
            /*第二步，超出隐藏文字*/
            overflow: hidden;
            /* 第三步，让超出的文字显示为省略号 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        <span>大碗大苏打挖的青蛙阿萨大大</span>
    </div>
    <!-- 增加放在省略号上面，显示文字 -->
    <script>
        // 用于显示放在文本上面，让文本显示全部
        var xs = document.querySelector('span');
        xs.onmouseover = function(){
            this.title =this.innerText;
        }
    </script>
</body>

</html>